/*
 * @描述:可编辑状态的lable组件
 * @Author: /songzi
 * @Date: 2019-07-19 13:55:44
 * @Last Modified by: songzi
 * @Last Modified time: 2019-07-23 16:11:00
 */

import React, { PureComponent, Fragment } from 'react';
import { Button, Input, Icon } from 'antd';
import styles from './index.less';

class EditLable extends PureComponent {
  state = {
    editVal: '',
    isEditIng: false,
    keyId: ''
  };

  componentDidMount() {
    const { lableName, keyId } = this.props;
    this.setState({ editVal: lableName, keyId });
  }

  /**
   * @description 可编辑组件编辑状态触发事件
   * @param {str} key
   */
  editChange = status => {
    this.setState({ isEditIng: status });
  };

  /**
   * @description 编辑输入框change事件
   * @param {*} event
   */
  inputChange = event => {
    const { onEditInputChange } = this.props;
    const editIngText = event.currentTarget.value;
    this.setState({ editVal: editIngText });
    if (onEditInputChange) onEditInputChange(editIngText);
    // this.editChange(false);
  };

  /**
   * @description 编辑确定按钮事件处理
   */
  editOk = () => {
    const { onEditOk } = this.props;
    const { keyId, editVal } = this.state;
    onEditOk(keyId, editVal);
    this.editChange(false);
  };

  /**
   * @description 编辑取消按钮事件处理
   */
  editCancle = () => {
    const { lableName, onEditCancle } = this.props;
    const { keyId } = this.state;
    onEditCancle(keyId);
    this.setState({ editVal: lableName });
    this.editChange(false);
  };

  render() {
    const { lableName, placeholder } = this.props;
    const { inputChange, editCancle, editChange, editOk } = this;
    const { editVal, isEditIng } = this.state;
    return (
      <div className={styles.labelCardHeader}>
        <div className={styles.labelCardHeaderContent}>
          {isEditIng ? (
            <Fragment>
              <Input size="small" defaultValue={lableName} placeholder={placeholder || ''} onChange={inputChange} allowClear />
            </Fragment>
          ) : (
            lableName
          )}
        </div>
        <div className={styles.labelCardHeaderBtn}>
          {isEditIng ? (
            <Fragment>
              <Button onClick={editOk} key="1" type="primary" size="small" shape="circle" disabled={!editVal}>
                <Icon type="check"></Icon>
              </Button>
              <Button
                onClick={editCancle}
                // type="primary"
                key="2"
                size="small"
                shape="circle"
              >
                <Icon type="close"></Icon>
              </Button>
            </Fragment>
          ) : (
            <Button className="labelCardHeaderEditBtn" onClick={() => editChange(true)} type="primary" key="3" size="small" shape="round">
              编辑
            </Button>
          )}
        </div>
      </div>
    );
  }
}
export default EditLable;
